<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="params"
      hide-actions
      class="elevation-0"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.id }}</td>
        <td class="text-xs-center">{{ props.item.name }}</td>
        <td class="text-xs-center">{{ formatBoolean(props.item.numeric) }}</td>
        <td class="text-xs-center">{{ props.item.unit || '无' }}</td>
        <td class="text-xs-center">{{ formatBoolean(props.item.generic) }}</td>
        <td class="text-xs-center">{{ formatBoolean(props.item.searching) }}</td>
        <td class="justify-center layout px-0">
          <v-btn icon @click="editParam(props.item)">
            <i class="el-icon-edit"/>
          </v-btn>
          <v-btn icon @click="deleteParam(props.item.id)">
            <i class="el-icon-delete"/>
          </v-btn>
        </td>
      </template>
      <template slot="no-data">
        该分组下没有参数
      </template>
    </v-data-table>
    <v-btn color='primary' @click="addParam">新增参数</v-btn>
    <v-dialog v-model="show" max-width="350px" scrollable>
      <v-card>
        <v-card-text style="height: 300px;">
          <v-flex class="px-3">
            <v-text-field label="参数名称：" v-model="param.name"/>
            <v-checkbox label="是否为通用属性" v-model="param.generic" color="primary" hide-details/>
            <v-checkbox label="是否为数值类型" v-model="param.numeric" color="primary" hide-details/>
            <v-text-field label="数值单位：" v-model="param.unit" v-if="param.numeric"/>
            <v-checkbox label="是否用于搜索" v-model="param.searching" color="primary" hide-details/>
            <v-flex v-if="param.searching && param.numeric" class="px-2">
              搜索过滤区间：
              <v-layout row wrap v-for="(s,i) in param.segments" :key="i">
                <v-flex xs5>
                  <v-text-field prefix="From: " v-model="s[0]" single-line hide-details/>
                </v-flex>
                <v-spacer/>
                <v-flex xs5>
                  <v-text-field prefix="To: " v-model="s[1]" single-line hide-details/>
                </v-flex>
                <v-flex xs1>
                  <v-btn icon @click="param.segments.splice(i,1)">
                    <i class="el-icon-delete"/>
                  </v-btn>
                </v-flex>
              </v-layout>
              <v-layout row>
                <v-spacer/>
                <v-flex xs1>
                  <v-tooltip left>
                    <v-btn slot="activator" icon @click="param.segments.push([0,0])">
                      <v-icon>add</v-icon>
                    </v-btn>
                    <span>点击为数值类型的参数添加分段，便于搜索过滤</span>
                  </v-tooltip>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-flex>
        </v-card-text>
        <v-card-actions>
          <v-spacer/>
          <v-btn color="blue darken-1" flat @click.native="show=false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="save">保存</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>
<script>
  export default {
    name: "v-spec-param",
    props: {
      group: {
        type: Object
      }
    },
    data() {
      return {
        headers: [
          {text: "id", value: "id", align: "center", sortable: false},
          {text: "参数名", value: "name", align: "center", sortable: false},
          {
            text: "是否为数值", value: "numeric",
            align: "center",
            sortable: false
          },
          {text: "单位", value: "unit", align: "center", sortable: false},
          {
            text: "是否通用",
            value: "generic",
            align: "center",
            sortable: false
          },
          {
            text: "是否可搜索",
            value: "searching",
            align: "center",
            sortable: false
          },
          {text: "操作", align: "center", sortable: false}
        ],
        params: [], // 参数
        show: false,
        param: {},
        isEdit: false
      };
    },
    watch: {
      group: {
        deep: true,
        handler(val) {
          if (val && val.id) {
            this.loadData();
          }
        }
      }
    },
    methods: {
      loadData() {
        this.$http
          .get("/item/spec/params?gid=" + this.group.id)
          .then(({data}) => {
            data.forEach(p => {
              p.segments = p.segments ? p.segments.split(",").map(s => s.split("-")) : [];
            })
            this.params = data;
          })
          .catch(() => {
            this.params = [];
          });
      },
      editParam(param) {
        this.param = param;
        this.isEdit = true;
        this.show = true;
      },
      addParam() {
        this.param = {
          cid: this.group.cid,
          groupId: this.group.id,
          segments: [],
          numeric: false,
          searching: false,
          generic: false
        }
        this.show = true;
      },
      deleteParam(id) {
        this.$message.confirm("确认要删除该参数吗？")
          .then(() => {
            this.$http.delete("/item/spec/param/" + id)
              .then(() => {
                this.$message.success("删除成功");
              })
              .catch(() => {
                this.$message.error("删除失败");
              })
          })
      },
      formatBoolean(boo) {
        return boo ? "是" : "否";
      },
      save() {
        const p = {};
        Object.assign(p, this.param);
        p.segments = p.segments.map(s => s.join("-")).join(",")
        this.$http({
          method: this.isEdit ? 'put' : 'post',
          url: '/item/spec/param',
          data: p,
        }).then(() => {
          // 关闭窗口
          this.show = false;
          this.$message.success("保存成功！");
          this.loadData();
        }).catch(() => {
          this.$message.error("保存失败！");
        });
      }
    }
  };
</script>
